<template>
  <div class="container-box">
    <div id="chartPie" ref="chartPie" style="width:100%;height:100%;"></div>
  </div>
</template>
<script lang="ts">
import * as echarts from 'echarts';
import { defineComponent, ref, nextTick, onMounted, getCurrentInstance, watch } from 'vue';
export default defineComponent({
  name: 'LineEchart',
   props: {
    nodes: {
      type: Object,
      default: () => { return [] } 
    }
  },
  setup(props) {
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    let myChart:any
    const data: any = ref([])
    watch(
        () => props.nodes,
        (old, val) => {
          if( val && old !== val) {
            data.value = old;
            initData()
            initChart()
          }
        },
        { immediate: true, deep: true }
    );
    const chartPie = ref()
    const option = ref({
      tooltip: {
        trigger: "item",
        valueFormatter:(value) => {
          return GL.$utils.formatFileSize(value * 1000 * 1000)
        }
      },
      title:{
        text: '点播文件信息',
        textStyle: {
          fontSize: 14
        }
      },
      legend: {
        textStyle: {
          color: "#B4B4B4"
        },
        bottom: 0
      },
    
      series: [
        {
          name: '',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '10',
              fontWeight: 'bold',
            }
          },
          labelLine: {
            show: false
          },
          data: []
        }
      ]
    })
    const initData = () => {
      const newdata = data.value.map(item => {
        return {value: item.FileSize, name: item.FileName}
      })
      option.value.series[0].data = newdata
    }
    const initChart = () => {
      nextTick(() => {
        myChart = echarts.init(chartPie.value)
        myChart && myChart.setOption(option.value)
      })
    }
   
    // onMounted(() => {
    //   setTimeout(() => {
    //     initChart()
    //   }, 200)
    // })
    return {
      chartPie
    }
  }
})
</script>
<style>
.container-box{
  height: 300px;
  width: 400px !important;
}
</style>